﻿<!doctype html>

<html>
<head>
    <title></title>
    <style type='text/css'>
        body {margin:0;padding:0}
        #rect {background:red;border:solid 1px black;width:100px;height:100px;position:absolute;top:0;left:0;-webkit-transform:translate3d(0,0,0)}
            #rect.blue {background:blue}
        #rect > a {color:#000}
    </style>
</head>
<body>

    <div id='rect'></div>

    <script type='text/javascript' src='../js/rfm/rfm.js'></script>
    <script type='text/javascript' src='../js/rfm/modules/dom.js'></script>
    <script type='text/javascript' src='../js/rfm/modules/css.js'></script>
    <script type='text/javascript' src='../js/rfm/modules/touch.js'></script>
    <script type='text/javascript'>
        var _isRed = true;
        function getCoordinates(element) {
            var x = element.getAttribute('data-x'),
                y = element.getAttribute('data-y');
            return {
                x: parseFloat(x || 0),
                y: parseFloat(y || 0)
            };
        }
        function setCoordinates(element, x, y) {
            element.setAttribute('data-x', x);
            element.setAttribute('data-y', y);
            if (rfm.css.transform3d) {
                element.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px,0)';
            }
            else {
                element.style.left = x + 'px';
                element.style.top = y + 'px';
            }
        }
        function ontransitionend_rect(e) {
            this.$animate({ backgroundColor: _isRed ? 'rgb(0,255,0)' : 'rgb(255,0,0)' }, 2000, 'ease-in-out');
            _isRed = !_isRed;
        }
        function ontouchstart_rect(e, eventData) {
            this.style.webkitTransition = '';
        }
        function ontouchmove_rect(e, eventData) {
            var currentCoords = getCoordinates(this);
            setCoordinates(this, currentCoords.x + eventData.deltaX, currentCoords.y + eventData.deltaY);
        }
        function ontouchend_rect(e, eventData) {
            if (rfm.css.transition && rfm.css.transitionEndEvent) {
                this.style.webkitTransition = '-webkit-transform .25s ease-out';
                this.$once('webkitTransitionEnd', ontransitionend_rect);
                var currentCoords = getCoordinates(this);
                setCoordinates(this, currentCoords.x + eventData.deltaX * 10, currentCoords.y + eventData.deltaY * 10);
            }
        }
        rfm.dom.first('#rect')
            .$drag(ontouchstart_rect, ontouchmove_rect, ontouchend_rect);
    </script>
</body>
</html>
